<template>
    <div class="article-manage" style="margin-left:5px">
        <el-card shadow="always" :body-style="{ padding: '20px',display: 'flex','justify-content': 'end' }">
            <el-row :gutter="20">
                 <el-col :span="24" style="display: flex;align-items: end;justify-content: end;line-height: 40px;height: 40px;">
                   <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/index/article' }">文章管理</el-breadcrumb-item>
                   </el-breadcrumb>
                </el-col>
                <el-col :span="12" style="display: flex; align-items: end;justify-content: end;line-height: 40px;height: 40px;">
                    <div class="grid-content bg-purple">
                        <el-button type="text"  icon="el-icon-plus" @click="addArticle" style="font-size:20px"></el-button>
                        <el-button type="text"  icon="el-icon-refresh-right" style="font-size:20px"></el-button>
                    </div>
                </el-col>
                    <el-col :span="12" style="display: flex;
                align-items: end;
                justify-content: flex-end;
                line-height: 40px;
                height: 40px;">
                    <div class="grid-content bg-purple">
                        <el-input placeholder="请输入内容" clearable v-model="input2">
                            <template slot="append"><i class="el-icon-search" style="color:#409EFF"></i></template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="24" class="tables">
                    <div class="grid-content bg-purple">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="blogId"     label="文章编号" width="100"></el-table-column>
                            <el-table-column prop="title" label="文章标题" width="100"></el-table-column>
                            <el-table-column prop="firstPicture"     label="文章首图" width="100">
                                <!-- <template slot-scope="scope">
                                    <el-popover placement="top-start" trigger="click"> -->
                                        <!--trigger属性值：hover、click、focus 和 manual-->
                                        <!-- <a :href="scope.row.firstPicture" target="_blank" title="查看最大化图片"><img :src="scope.row.pcoverimg" style="width: 300px;height: 300px" /></a>
                                        <img slot="reference" :src="scope.row.firstPicture" style="width: 50px;height: 50px; cursor:pointer" />
                                    </el-popover>
                                </template> -->
                                <template slot-scope="scope">
                                    <el-image style="width: 50px; height: 30px" :src="scope.row.firstPicture" :preview-src-list="[scope.row.firstPicture]"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="flag"  label="文章标记" width="100"></el-table-column>
                            <el-table-column prop="views" label="浏览次数" width="100"></el-table-column>
                            <el-table-column prop="appreciation" label="赞赏开启" width="100">
                                <template slot-scope="scope">
                                    <el-switch
                                        on-color="#5B7BFA"
                                        off-color="#dadde5"
                                        active-value="1"
    				                    inactive-value="0"
                                        v-model="scope.row.appreciation"                 
                                    >
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="shacestatement"  label="授权开启" width="100">
                                <template slot-scope="scope">
                                    <el-switch
                                        on-color="#5B7BFA"
                                        off-color="#dadde5"
                                        active-value="1"
    				                    inactive-value="0"
                                        v-model="scope.row.shacestatement"                 
                                    >
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="commentabled" label="评论开启" width="100">
                                <template slot-scope="scope">
                                    <el-switch
                                        on-color="#5B7BFA"
                                        off-color="#dadde5"
                                        active-value="1"
    				                    inactive-value="0"
                                        v-model="scope.row.commentabled"                 
                                    >
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="published" label="发布" width="100">
                                <template slot-scope="scope">
                                    <el-switch
                                        on-color="#5B7BFA"
                                        off-color="#dadde5"
                                        active-value="1"
    				                    inactive-value="0"
                                        v-model="scope.row.published"                 
                                    >
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="recommend" label="文章推荐" width="100">
                                <template slot-scope="scope">
                                    <el-switch
                                         on-color="#5B7BFA"
                                        off-color="#dadde5"
                                        active-value="1"
    				                    inactive-value="0"
                                        v-model="scope.row.recommend"                 
                                    >
                                    </el-switch>
                                </template>    
                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" width="100"></el-table-column>
                            <el-table-column prop="updateTime" label="更新时间" width="100"></el-table-column>
                            <el-table-column fixed="right"   label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="editArticle(scope.row)" type="text" icon="el-icon-edit" size="small" style="font-size:20px"></el-button>
                                <el-button @click="deleteArticle(scope.row)" type="text" size="small" icon="el-icon-delete" style="font-size:20px"></el-button>
                            </template>
                            </el-table-column>
                        </el-table>
                            
                    </div>
                </el-col>
                <el-col :span="24" style="display: flex;justify-content: end;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                    </el-pagination>
                </el-col>
            </el-row>



        <Dialog :dialogVisible.sync="addDialogVisible" titleName="添加文章" width="80%" >
            <Article_add/>
        </Dialog>
        <Dialog :dialogVisible.sync="editDialogVisible" titleName="编辑文章" width="80%">
            <Article_edit/>
        </Dialog>
        </el-card>              
    </div> 
</template>
<script>
import Dialog from '../../components/dialog/Dialog'
import Article_add from './Article_add'
import Article_edit from  './Article_edit'
export default{
    name:'Article',
    data(){
        return{
             addDialogVisible:false,
             editDialogVisible:false,
             input2:'',
             currentPage4: 4,
             tableData: []

        }
    },
    components:{
        Dialog,
        Article_add,
        Article_edit
    },
    mounted:function(){
       this.listBlog();
    },
    methods:{
        listBlog:function(){
            debugger
            var _this=this;
            _this.$http.post('/api/blog/list')
            .then(function (response) {
                console.log(response);
                _this.tableData=response.data.data
            })
            .catch(function (error) {
                console.log(error);
            });

        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        addArticle:function(){
            this.addDialogVisible=true;
            this.editDialogVisible=false;
        },
        deleteArticle:function(row){
             var _this=this;
            _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$message({
                    type: 'success',
                    message: '删除成功'
                }); 
            }).catch(() => {
                _this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });            
        },
        editArticle:function(row){
            this.editDialogVisible=true;
            this.addDialogVisible=false;
        },
    }
}
</script>
<style>
.el-table__header tr,.el-table__header th {
    padding: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.el-table__body tr,
.el-table__body td {
    padding: 0;
    height: 40px;
    line-height: 40px;
    text-align: left;
}
.tables{
    margin-top: 5px;
    /* border:1px solid red; */
}
.el-input{
    width:300px;
}
.article-manage{
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

</style>